<script setup>
import {post} from "@/request/request";
import {onShow} from "@dcloudio/uni-app";
import {ref} from "vue";
import {config} from "@/config";

const userInfos = ref({})

const setupForm = ref({
  avatar: '', //头像
  nickname: '', //昵称
  gender: '', //性别
  label: '', //地址
})

onShow(() => {
  userInfo()
})

const homeClick = () => {
  uni.navigateBack();
};

const userInfo = () => {
  post('userInfo').then(res => {
    const {data} = res;
    setupForm.value.gender = String(data.u_gender);
    userInfos.value = data;
  })
}

const radiolist = [{
  name: 'ئوغۇل',
  label: '1',
  disabled: false
},
  {
    name: 'قىز',
    label: '2',
    disabled: false
  }]


const positionClick = () => {
  uni.chooseLocation({
    success: function (res) {
      setupForm.value.label = res.address;
    }
  });
}

const radioChange = (value) => {
  setupForm.value.gender = value;
}

const onChooseAvatar = (e) => {
  uni.uploadFile({
    url: config.baseUrl + "avatarEdit",
    fileType: "image",
    name: "avatar",
    header: {"Content-Type": "multipart/form-data"},
    filePath: e.detail.avatarUrl,
    success: (res) => {
      const result = JSON.parse(res.data);
      setupForm.value.avatar = result.data;
    },
  });
};

const bindBlurNickName = (e) => {
  setupForm.value.nickname = e.detail.value;
}

const sureClick = () => {
  post('avatarEdit', setupForm.value).then(res => {
    if (res.code === 200) {
      uni.navigateBack()
    }
  })
}

//分享
const onShareAppMessage = (res) => {
  if (res.from === "button") {
  }
  return {
    title: "ئەڭ ئىسىل مەھسۇلات بىزدە",
    path: "/pages/home/home",
  };
};

</script>
<template>
  <uv-navbar :fixed="true" :placeholder="true" @leftClick="homeClick">
    <template v-slot:left>
      <view class="uv-nav-slot">
        <image src="/static/search/arrow-left.svg"/>
      </view>
    </template>
  </uv-navbar>
  <view class="setup">
    <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="avatar-box">
      <image :src="userInfos.u_avatar"/>
    </button>
    <view style="width: 100%;padding: 20rpx">ئابۇنىت ئۇچۇرى</view>
    <view class="nick-name-box">
      <view style="display: flex;align-items: center;width: 100%">
        <view style="padding: 20rpx;">ئىسمى :</view>
        <input :placeholder="userInfos.u_nickname" v-model="userInfos.u_nickname" border="bottom" type="nickname"
               @change="bindBlurNickName">
      </view>
    </view>
    <view class="nick-name-box">
      <view style="display: flex;align-items: center;">
        <view style="padding: 20rpx;">جىنسى:</view>
        <uv-radio-group v-model="setupForm.gender" activeColor="#FF9385" @change="radioChange">
          <uv-radio :customStyle="{ margin: '8px' }" v-for="(item, index) in radiolist" :key="index" :label="item.name"
                    :name="item.label">
          </uv-radio>
        </uv-radio-group>
      </view>
    </view>
    <view class="nick-name-box">
      <view style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
        <view style="padding: 20rpx;">ئادرىس:</view>
        <input placeholder="مال ئادرىسى" border="bottom" placeholder-class="my-font" v-model="setupForm.label"/>
        <image class="position" src="/static/position.svg" @click="positionClick"/>
      </view>
    </view>
    <view class="sure-btn-box">
      <button @click="sureClick">جەزىملەش</button>
    </view>
  </view>
</template>


<style scoped lang="scss">
@mixin flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: $direction;
}

.uv-nav-slot {
  @include flex;
  align-items: center;
  justify-content: space-between;
  border-width: 1rpx;
  border-radius: 200rpx;
  border-color: #dadbde;
  padding: 6rpx 14rpx;
  opacity: 0.8;
  z-index: 999;

  image {
    width: 44rpx;
    height: 44rpx;
  }
}

.setup {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20rpx;
  direction: rtl;

  .avatar-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;

    image {
      width: 154rpx;
      height: 154rpx;
      border-radius: 99999rpx;
    }
  }

  .nick-name-box {
    width: 100%;
    padding: 20rpx;
    display: flex;

    input {
      width: 80%;
      height: 96rpx;
      background: #F4F4F4;
      border-radius: 20rpx;
    }

    .position {
      margin-right: 10rpx;
      width: 44rpx;
      height: 44rpx;
    }
  }

  .sure-btn-box {
    width: 100%;
    position: fixed;
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    align-items: center;
    justify-content: center;

    button {
      width: 690rpx;
      height: 84rpx;
      background: #43A833;
      text-align: center;
      color: #FFF;
      border-radius: 20rpx;
    }
  }
}

button::after {
  border: none;
}
</style>
